<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue动态组件与v-once指令</title>
</head>
<body>
  <script src="./js/vue2.js"></script>
  <div id="app">
    <!-- 通过动态组件来实现切换 -->
    <!-- <component :is="type"></component> -->
    <child-one v-if="type==='child-one'"></child-one>
    <child-two v-if="type==='child-two'"></child-two>
    <button @click="handleClick">切换</button>
  </div>
</body>
</html>
<script>

  Vue.component('child-one',{
    template:`<h1 v-once>child-one</h1>`,
  });
  Vue.component('child-two',{
    template:`<h1 v-once>child-two</h1>`,
  });

  var vm = new Vue({
    el: '#app',
    data: {
      type: 'child-one',
    },
    methods: {
      handleClick: function(){
        this.type = (this.type==='child-one'?'child-two':'child-one');
      }
    }
  });

  /**
  component是vue内置的，可通过 :is 属性来作为动态组件

  v-once 在需要频繁切换dom元素的时候，v-once指令可以帮助将dom缓存到内存中，
  从而减少频繁切换dom带来的性能消耗

  */
</script>